<script setup defer async lang="ts">
import { reactive, onMounted, ref, onUnmounted, onBeforeUnmount } from 'vue'
import { useI18n } from 'vue-i18n'
import { marking } from '@/api/user'
import { onLoad } from '@dcloudio/uni-app'
import { convertNumbers } from '@/utils/utils'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'
//  query 
const country=ref(1);
	const exchangeRate=ref(1);
	const symbol = ref('$')
const query = ref({})
const { t } = useI18n()
//  onLoad 
onLoad((options) => {
  query.value = options || {}
})
const baseData = reactive({
  type: 1, //1 week 2 month
  indexList: [] as any[],
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
})
const rightClick = () => {
  console.log(getCurrentPages())
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}
const changTab = (e: any) => {
  baseData.type = e.index ? 2 : 1
  getList()
}
const scrolltolower = () => {
  // 
  console.log('')
}
const getList = async () => {
  uni.showLoading({
    title: t('Loading'),
    icon: 'none',
  })
  let params: any = {
    type: baseData.type,
  }
  try {
    const res = await marking(params)
    if (res.code == 0) {
      baseData.indexList = res.data
    }
  } catch (error) {
    console.error(':', error)
  } finally {
    uni.hideLoading()
  }
}
// 
const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}
useSwipeHandlers(handleSwipeRight)
onMounted(() => {
  // 
  uni.setNavigationBarTitle({
    title: 'Taskflix!' + t('Earn money so easy') + '!', // 
  })
  symbol.value = uni.getStorageSync('symbol') || '₹'; 
  		country.value=uni.getStorageSync('country') || 1;
  		exchangeRate.value=uni.getStorageSync('exchangeRate') || 1;
  getList()
})
</script>

<template>
  <view class="leaderboard-container">
    <!--  -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
      <view class="floating-shape shape-1">🏆</view>
      <view class="floating-shape shape-2">👑</view>
      <view class="floating-shape shape-3">⭐</view>
    </view>

    <!--  -->
    <up-navbar title="" @leftClick="rightClick" :autoBack="false">
      <template #left>
        <view class="nav-back-btn">
          <image  class="back-icon" src="../../../static/img/left.png"></image>
        </view>
      </template>
    </up-navbar>

    <!--  -->
    <view class="header-section">
      <view class="title-container">
        <text class="main-title">{{ t('RANKING LIST') }}</text>
        <view class="title-decoration">
          <view class="crown-icon">👑</view>
        </view>
      </view>
    </view>

    <!--  -->
    <view class="podium-section" v-if="baseData.indexList?.length >= 3">
      <view class="podium-container">
        <!--  -->
        <view class="podium-item second-place">
          <view class="podium-avatar">
            <text class="avatar-text">{{ baseData.indexList[1]?.RegAc?.charAt(0)?.toUpperCase() || 'U' }}</text>
            <view class="rank-badge silver">
              <image class="medal-icon" src="../../../static/img/two.png"></image>
            </view>
          </view>
          <text class="podium-name">{{ baseData.indexList[1]?.RegAc }}</text>
          <text class="podium-amount">{{symbol}}{{ convertNumbers(baseData.indexList[1]?.Total,exchangeRate)  }}</text>
          <view class="podium-base second"></view>
        </view>

        <!--  -->
        <view class="podium-item first-place">
          <view class="podium-avatar champion">
            <text class="avatar-text">{{ baseData.indexList[0]?.RegAc?.charAt(0)?.toUpperCase() || 'U' }}</text>
            <view class="rank-badge gold">
              <image class="medal-icon" src="../../../static/img/one.png"></image>
            </view>
            <view class="crown-decoration">👑</view>
          </view>
          <text class="podium-name champion-name">{{ baseData.indexList[0]?.RegAc }}</text>
          <text class="podium-amount champion-amount">{{symbol}}{{  convertNumbers(baseData.indexList[0]?.Total,exchangeRate) }}</text>
          <view class="podium-base first"></view>
        </view>

        <!--  -->
        <view class="podium-item third-place">
          <view class="podium-avatar">
            <text class="avatar-text">{{ baseData.indexList[2]?.RegAc?.charAt(0)?.toUpperCase() || 'U' }}</text>
            <view class="rank-badge bronze">
              <image class="medal-icon" src="../../../static/img/three.png"></image>
            </view>
          </view>
          <text class="podium-name">{{ baseData.indexList[2]?.RegAc }}</text>
          <text class="podium-amount">{{symbol}}{{  convertNumbers(baseData.indexList[2]?.Total,exchangeRate) }}</text>
          <view class="podium-base third"></view>
        </view>
      </view>
    </view>

    <!--  -->
    <view class="main-content">
      <!--  -->
      <view class="tabs-container">
        <up-tabs
          :activeStyle="{ color: '#667eea', fontWeight: 'bold' }"
          :lineWidth="60"
          :lineHeight="6"
          lineColor="#667eea"
          :list="[{ name: t('Week') }, { name: t('Month') }]"
          @click="changTab"
        ></up-tabs>
      </view>

      <!--  -->
      <view class="ranking-list">
        <up-list style="height: 100%" @scrolltolower="scrolltolower">
          <up-list-item v-for="(item, index) in baseData.indexList?.slice(3)" :key="index + 3">
            <view class="ranking-item">
              <!--  -->
              <view class="rank-indicator">
                <view class="rank-number">{{ index + 4 }}</view>
              </view>

              <!--  -->
              <view class="user-info">
                <view class="user-avatar">
                  <text class="avatar-text">{{ item.RegAc?.charAt(0)?.toUpperCase() || 'U' }}</text>
                </view>
                <view class="user-details">
                  <text class="username ellipsis">{{ item.RegAc }}</text>
                </view>
              </view>

              <!--  -->
              <view class="earnings">
                <text class="currency">{{symbol}}</text>
                <text class="amount">{{  convertNumbers(item.Total,exchangeRate) }}</text>
              </view>
            </view>
          </up-list-item>
          
          <!--  -->
          <up-list-item>
            <view class="end-indicator">
              <text class="end-text">{{ t('Reached the End') }}</text>
            </view>
          </up-list-item>
        </up-list>
      </view>
    </view>

    <!-- Telegram  -->
    <a :href="baseData.aircraftUrl" target="_blank">
      <img class="telegram-fixed-icon" src="@/static/teltgram.png" />
    </a>
  </view>
</template>

<style lang="scss" scoped>
.leaderboard-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

// 
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;

  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;

    &.circle-1 {
      width: 200rpx;
      height: 200rpx;
      top: 10%;
      left: -50rpx;
      animation-delay: 0s;
    }

    &.circle-2 {
      width: 150rpx;
      height: 150rpx;
      top: 60%;
      right: -30rpx;
      animation-delay: 2s;
    }

    &.circle-3 {
      width: 100rpx;
      height: 100rpx;
      top: 30%;
      right: 20%;
      animation-delay: 4s;
    }
  }

  .floating-shape {
    position: absolute;
    font-size: 40rpx;
    animation: bounce 3s ease-in-out infinite;

    &.shape-1 {
      top: 15%;
      right: 10%;
      animation-delay: 1s;
    }

    &.shape-2 {
      top: 45%;
      left: 5%;
      animation-delay: 3s;
    }

    &.shape-3 {
      top: 75%;
      right: 15%;
      animation-delay: 5s;
    }
  }
}



// 
.header-section {
  padding: 120rpx 40rpx 20rpx;
  text-align: center;
  position: relative;
  z-index: 2;

  .title-container {
    position: relative;
    display: inline-block;

    .main-title {
      font-size: 48rpx;
      font-weight: bold;
      color: white;
      text-shadow: 
        0 4rpx 20rpx rgba(0, 0, 0, 0.3),
        0 0 40rpx rgba(255, 255, 255, 0.2);
      animation: title-glow 3s ease-in-out infinite alternate;
    }

    .title-decoration {
      position: absolute;
      top: -20rpx;
      right: -40rpx;

      .crown-icon {
        font-size: 32rpx;
        animation: bounce 2s ease-in-out infinite;
      }
    }
  }
}

// 
.podium-section {
  padding: 50rpx 40rpx 40rpx;
  position: relative;
  z-index: 2;

  .podium-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20rpx;

    .podium-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      &.first-place {
        order: 2;
        transform: translateY(-30rpx);
      }

      &.second-place {
        order: 1;
        transform: translateY(-10rpx);
      }

      &.third-place {
        order: 3;
      }

      .podium-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15rpx;
        position: relative;
        box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);

        &.champion {
          width: 140rpx;
          height: 140rpx;
          background: linear-gradient(135deg, #ffd700, #ffed4e);
          animation: champion-glow 2s ease-in-out infinite alternate;
        }

        .avatar-text {
          color: white;
          font-size: 36rpx;
          font-weight: bold;
        }

        .rank-badge {
          position: absolute;
          bottom: -10rpx;
          right: -10rpx;
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

         

          .medal-icon {
            width: 30rpx;
            height: 30rpx;
          }
        }

        .crown-decoration {
          position: absolute;
          top: -25rpx;
          font-size: 30rpx;
          animation: crown-float 2s ease-in-out infinite;
        }
      }

      .podium-name {
        font-size: 24rpx;
        color: white;
        font-weight: 600;
        margin-bottom: 8rpx;
        text-align: center;
        max-width: 120rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.champion-name {
          font-size: 28rpx;
          color: #ffd700;
          text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
        }
      }

      .podium-amount {
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.9);
        font-weight: bold;
        margin-bottom: 20rpx;

        &.champion-amount {
          font-size: 26rpx;
          color: #ffd700;
        }
      }

      .podium-base {
        width: 100rpx;
        border-radius: 10rpx 10rpx 0 0;
        // background: rgba(255, 255, 255, 0.2);

        &.first {
          height: 80rpx;
          background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1));
        }

        &.second {
          height: 60rpx;
          background: linear-gradient(135deg, rgba(192, 192, 192, 0.3), rgba(192, 192, 192, 0.1));
        }

        &.third {
          height: 40rpx;
          background: linear-gradient(135deg, rgba(205, 127, 50, 0.3), rgba(205, 127, 50, 0.1));
        }
      }
    }
  }
}

// 
.main-content {
  flex: 1;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 40rpx;
    margin: 0 20rpx;
    padding: 40rpx 30rpx;
    position: relative;
    z-index: 2;
    min-height: 40vh;

  .tabs-container {
     margin-bottom: 30rpx;
     // 
     width: 100%;
     overflow: visible;
     touch-action: manipulation;
     -webkit-overflow-scrolling: touch;
     
     ::v-deep .u-tabs {
       // 
       width: 100%;
       overflow: visible;
       
       .u-tabs__wrapper {
         // 
         touch-action: manipulation;
         -webkit-overflow-scrolling: touch;
         overflow-x: auto;
         overflow-y: hidden;
       }
       
       .u-tabs__wrapper__nav {
         // 
         display: flex;
         white-space: nowrap;
         overflow-x: auto;
         overflow-y: hidden;
         -webkit-overflow-scrolling: touch;
         scroll-behavior: smooth;
         
         // 
         &::-webkit-scrollbar {
           display: none;
         }
         scrollbar-width: none;
         -ms-overflow-style: none;
       }
       
       .u-tabs__wrapper__nav__item {
         flex: 1 !important;
         padding: 20rpx 0;
         // 
         pointer-events: auto;
         touch-action: manipulation;
         min-width: 0;
         position: relative;
       }
       
       // 
       .u-tabs__wrapper__nav__line {
         pointer-events: none;
         z-index: 1;
       }
     }
   }

  .ranking-list {
    height: 35vh;
    overflow: hidden;

    .ranking-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      margin-bottom: 12rpx;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 15rpx;
      box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      .rank-indicator {
        width: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .rank-number {
          font-size: 28rpx;
          font-weight: bold;
          color: #667eea;
        }
      }

      .user-info {
        flex: 1;
        display: flex;
        align-items: center;
        margin: 0 15rpx;

        .user-avatar {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          background: linear-gradient(135deg, #667eea, #764ba2);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15rpx;

          .avatar-text {
            color: white;
            font-size: 20rpx;
            font-weight: bold;
          }
        }

        .user-details {
          flex: 1;

          .username {
            display: block;
            font-size: 26rpx;
            color: #333;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .earnings {
        display: flex;
        align-items: baseline;

        .currency {
          font-size: 20rpx;
          color: #667eea;
          font-weight: bold;
          margin-right: 5rpx;
        }

        .amount {
          font-size: 26rpx;
          color: #667eea;
          font-weight: bold;
        }
      }
    }

    .end-indicator {
      text-align: center;
      padding: 30rpx 0;

      .end-text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}



// 
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes title-glow {
  0% {
    text-shadow: 
      0 4rpx 20rpx rgba(0, 0, 0, 0.3),
      0 0 40rpx rgba(255, 255, 255, 0.2);
  }
  100% {
    text-shadow: 
      0 4rpx 30rpx rgba(0, 0, 0, 0.4),
      0 0 60rpx rgba(255, 255, 255, 0.4);
  }
}

@keyframes champion-glow {
  0% {
    box-shadow: 0 10rpx 30rpx rgba(255, 215, 0, 0.3);
  }
  100% {
    box-shadow: 0 15rpx 40rpx rgba(255, 215, 0, 0.5);
  }
}

@keyframes crown-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10rpx); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 如果是 uni-app，可以用 rpx 或 px，根据实际改 */
.ellipsis {
  display: inline-block;       
  width: 260rpx;              
  white-space: nowrap;         
  overflow: hidden;            
  text-overflow: ellipsis;     
}

</style>